<template>
  <div class="ctm-node">
    <div class="ctm-node__header">{{ title }}</div>
    <div
      class="ctm-node__body"
      :style="{ 'grid-template-columns': `repeat(${column}, 1fr)` }"
    >
      <div
        v-for="(item, index) in list"
        :key="index"
        :class="[
          'ctm-node__body__item',
          {
            'ctm-node__body__item--primary': item.type === 'primary',
            'ctm-node__body__item--disabled': item.type === 'disabled',
            'ctm-node__body__item--hidden': item.type === 'hidden',
          },
        ]"
        :style="{ width: `${px2vw(itemWidth)}vw` }"
        :title="item.label"
        @click="handleClick(item)"
      >
        {{ item.label }}
      </div>
    </div>
  </div>
</template>

<script>
import { px2vw } from '@/utils/flexible'

export default {
  name: 'GsNode',
  inject: ['getNode'],
  data() {
    return {
      title: '-',
      column: 1,
      itemWidth: 128,
      list: [],
    }
  },
  mounted() {
    const node = this.getNode()
    node.on('change:data', ({ current }) => {
      const { title = '', column = 1, itemWidth, list = [] } = current
      this.title = title
      this.column = column
      if (itemWidth) {
        this.itemWidth = itemWidth
      }
      this.list = list
    })
  },
  methods: {
    px2vw,
    handleClick(item) {
      console.log(item.label)
    },
  },
}
</script>

<style scoped>
.ctm-node {
  background-image: linear-gradient(
    270deg,
    #e8f7ff 0%,
    #ffffff 49%,
    #e4f6ff 100%
  );
  box-shadow: 0 0 20px 0 rgba(40, 107, 208, 0.2);
  border-radius: 0.42vw;
}
.ctm-node__header {
  border-radius: 0.42vw 0.42vw 0 0;
  font: 600 0.83vw/2.29vw PingFangSC-Semibold;
  text-align: center;
  color: #fff;
  background-image: linear-gradient(
    180deg,
    #2070e8 0%,
    #3786fd 41%,
    #7bb0ff 100%
  );
}

.ctm-node__body {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  grid-column-gap: 0.42vw;
  grid-row-gap: 0.62vw;
  padding: 0.83vw;
  border-radius: 0 0 0.83vw 0.83vw;

  background-color: #fafafa;
}

.ctm-node__body__item {
  flex-shrink: 0;
  width: 6.67vw;
  font: 500 0.62vw/1.87vw PingFangSC-Medium;
  border-radius: 0.26vw;
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  color: #3281f6;
  background-color: #e0eef9;
  border: 1px solid rgba(143, 188, 255, 0.5);
  cursor: pointer;
}
.ctm-node__body__item--primary {
  border-color: #1b6ce3;
  color: #fff;
  background-color: #3281f6;
}
.ctm-node__body__item--disabled {
  border-color: rgba(67, 129, 214, 0.5);
  color: #fff;
  background-color: #7ab2ff;
}
.ctm-node__body__item--hidden {
  transform: scale(0);
}
</style>
